<template>
	<div class="import_root">
		<div class="card m5 p10 flex_col">
			<label>上传excel</label>
			<input accept=".xlsx" @change="onChange" title="选择excel文件" type="file" />
		</div>

		<div class="card m5 p10 flex_col">
			<label class="flex_center_self">修改/创建员工</label>
			<div class="flex_row_center mt5">
				<label style="min-width: 50px;">工号:</label>
				<el-input clearable style="width: 200px;" v-model="ctx.info.account" />
			</div>
			<div class="flex_row_center mt5">
				<label style="min-width: 50px;">姓名:</label>
				<el-input clearable style="width: 200px;" v-model="ctx.info.name" />
			</div>
			<div class="flex_row_center mt5">
				<label style="min-width: 50px;">部门:</label>
				<el-input clearable style="width: 200px;" v-model="ctx.info.org" />
			</div>
			<div class="flex_row_center mt5">
				<label style="min-width: 50px;">职位:</label>
				<el-input clearable style="width: 200px;" v-model="ctx.info.job" />
			</div>
			<div class="flex_row_center mt5">
				<label>入职日期:</label>
				<el-date-picker v-model="ctx.date" />
			</div>
			<div class="flex_row_center mt5">
				<el-button @click="onClickCreate" type="primary">创建</el-button>
				<el-button @click="onClickActive0" type="warning">离职</el-button>
				<el-button @click="onClickActive1" type="warning">在职</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { runAction, runAction3 } from '@/utils/ui';
import { type EmplInfo2, service } from '@/service/api';
import { reactive, ref, watch } from 'vue';
import { dateFormat, selectEmpl, selectOrg } from '@/service/global';

async function onChange(event: Event) {
	const e = event.target as HTMLInputElement;
	if (e.files == null) {
		return;
	}
	if (e.files.length != 1) {
		return;
	}
	const file = e.files[0];
	runAction3('上传', '上传中', async () => {
		const count = await service.upload_empl_excel(file);
		return `更新了${count}个员工信息`;
	});
}

interface Ctx {
	info: EmplInfo2,
	date: Date,
}

const ctx = reactive<Ctx>({
	info: {
		name: selectEmpl.value.name,
		org: selectEmpl.value.org,
		job: selectEmpl.value.job,
		date: selectEmpl.value.date,
		account: selectEmpl.value.account,
		holiday: 0,
		active: 0,
	},
	date: new Date(),
});

watch(selectOrg, () => {
	ctx.info.org = selectOrg.value;
})

watch(selectEmpl, () => {
	ctx.info.name = selectEmpl.value.name;
	ctx.info.account = selectEmpl.value.account;
	ctx.info.job = selectEmpl.value.job;
	ctx.date = new Date(selectEmpl.value.date);
})

async function onClickCreate() {
	runAction('创建', '创建员工', async () => {
		if (ctx.info.account.length == 0) {
			throw '请输入工号';
		}
		if (ctx.info.name.length == 0) {
			throw '请输入姓名';
		}
		if (ctx.info.job.length == 0) {
			throw '请输入职位';
		}
		if (ctx.info.org.length == 0) {
			throw '请输入部门';
		}
		ctx.info.active = 0;
		ctx.info.holiday = 0;
		ctx.info.date = dateFormat(ctx.date);
		service.createEmpl(ctx.info);
	});
}

async function onClickChange() {
	runAction('修改', '修改员工', async () => {
		if (ctx.info.account.length == 0) {
			throw '请输入工号';
		}
		if (ctx.info.name.length == 0) {
			throw '请输入姓名';
		}
		if (ctx.info.job.length == 0) {
			throw '请输入职位';
		}
		if (ctx.info.org.length == 0) {
			throw '请输入部门';
		}
		ctx.info.active = 0;
		ctx.info.holiday = 0;
		ctx.info.date = dateFormat(ctx.date);
		service.changeEmpl(ctx.info);
	});
}

async function onClickActive0() {
	runAction('离职', '修改离职', async () => {
		if (ctx.info.account.length == 0) {
			throw '请输入工号';
		}
		service.activeEmpl({
			account: ctx.info.account,
			active: 1
		});
	});
}

async function onClickActive1() {
	runAction('在职', '修改在职', async () => {
		if (ctx.info.account.length == 0) {
			throw '请输入工号';
		}
		service.activeEmpl({
			account: ctx.info.account,
			active: 0
		});
	});
}

</script>
